<template>
	<div v-loading="loadingStatus" element-loading-text="上传中请稍后">
		<div class="img-box">
			<div v-for="(item,val) in typeList">
				<div class="img-box-s">
					<!-- 图片展示 -->
					<div class="img-show" v-show="item.show">
						<div class="del-img" @click="delshow(val)"><img :src="delImg" alt=""></div>
						<div class="show-img"><img :src="item.url" alt=""></div>
					</div>
					<!-- 图片上传 -->
					<div class="img-up" v-show="item.upShow">
						<div class="del-img" @click="delup(val)"><img :src="delImg" alt=""></div>
						<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
							:show-file-list="false" :on-success="(index,value) => handleAvatarSuccess(index,value,val)"
							:before-upload="beforeAvatarUpload">
							<img v-if="item.url" :src="item.url" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<div class="text-t butt">{{item.name}}</div>
					<div class="butt">
						<el-button @click="upChange(val)" v-show="item.butt">上传渠道</el-button>
						<el-button v-show="item.upSuccess" :disabled="true">上传成功</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			userID: {}
		},
		data() {
			return {
				delImg: require('../../../../../imgs/del.png'),
				merchantType: "1", //商户类型
				bankType: "1", //结算类型
				settleType: "1", //入账类型
				loadingStatus: false,
				imageList: {},
				typeList: [{
						id: 1,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						front_card: '',
						url: '',
						name: '身份证正面',
					},
					{
						id: 2,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						back_card: '',
						url: '',
						name: '身份证反面',
					},
					{
						id: 3,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						business_license: '',
						url: '',
						name: '营业执照',
					},
					{
						id: 5,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						opening_account: '',
						url: '',
						name: '开户许可证',
					},
					{
						id: 6,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						sign_doard: '',
						url: '',
						name: '门头照',
					},
					{
						id: 8,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						cashier: '',
						url: '',
						name: '收银台照片',
					},
					{
						id: 13,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						collect: '',
						url: '',
						name: '商户收单协议照片',
					},
					{
						id: 14,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						power: '',
						url: '',
						name: '结算授权书',
					},
					{
						id: 15,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						bank_card: '',
						url: '',
						name: '银行卡正面照',
					},
					{
						id: 17,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						beFrontCard: '',
						url: '',
						name: '被授权人证件正面照',
					},
					{
						id: 18,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						beBackCard: '',
						url: '',
						name: '被授权人证件背面照',
					}
				],
			};
		},
		methods: {
			delshow(a) { //删除图片 重新上传
				this.$set(this.typeList[a], 'show', false);
				this.$set(this.typeList[a], 'upShow', true);
				this.$set(this.typeList[a], 'url', '');
			},
			delup(a) {
				console.log(a);
			},
			handleAvatarSuccess(res, file, id) {
				if (res.code == 200) {
					this.loadingStatus = false;
					this.$set(this.typeList[id], 'url', res.content.path);
				}
			},
			beforeAvatarUpload(file) {
				this.loadingStatus = true;
				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			upChange(id, url) {
				if (!this.typeList[id].url) {
					this.$message.error('上传图片不能为空');
				}
				this.loadingStatus = true;
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.userID,
						type: 4,
						genre: 1,
						imgID: this.typeList[id].id,
						imgUrl: this.typeList[id].url,
					},
					success(res) {
						if (res.data.code == 200) {
							that.loadingStatus = false;
							that.$set(that.typeList[id], 'butt', false);
							that.$set(that.typeList[id], 'upSuccess', true);
							that.$message.success('上传成功');
						}
					},
				});
			}
		},
		created() {
			console.log(this.userID)
		
			//获取商户图片信息
			let that = this;
		
			that.imageList = that.$store.state.merchantInfo.user_file;
			that.typeList[0].url = that.imageList.front_card;
			that.typeList[0].show = that.imageList.front_card ? true : false;
			that.typeList[0].upShow = that.imageList.front_card ? false : true;
			that.typeList[1].url = that.imageList.back_card;
			that.typeList[1].show = that.imageList.back_card ? true : false;
			that.typeList[1].upShow = that.imageList.back_card ? false : true;
			that.typeList[2].url = that.imageList.business_license;
			that.typeList[2].show = that.imageList.business_license ? true : false;
			that.typeList[2].upShow = that.imageList.business_license ? false : true;
			that.typeList[3].url = that.imageList.opening_account;
			that.typeList[3].show = that.imageList.opening_account ? true : false;
			that.typeList[3].upShow = that.imageList.opening_account ? false : true;
			that.typeList[4].url = that.imageList.sign_doard;
			that.typeList[4].show = that.imageList.sign_doard ? true : false;
			that.typeList[4].upShow = that.imageList.sign_doard ? false : true;
			that.typeList[8].url = that.imageList.bank_card;
			that.typeList[8].show = that.imageList.bank_card ? true : false;
			that.typeList[8].upShow = that.imageList.bank_card ? false : true;
		}
	}
</script>

<style scoped>
	.img-box {
		/* border: 1px solid red; */
	}

	.img-nav {
		margin-top: 15px;
	}

	.nav-text-1 {
		font-size: 16px;
		font-weight: bold;
	}

	.nav-text-2 {
		font-size: 10px;
		color: #99A9BF;
		font-weight: 100;
	}

	.nav-text-3 {
		color: #67C23A;
	}

	.nav-radio {
		margin-top: 20px;
		margin-left: 40px;
	}

	.img-box {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.img-box-s {
		margin-left: 100px;
	}

	.img-show {
		width: 220px;
		height: 220px;
		display: flex;
		flex-direction: column;
		/* 	justify-content: center;
	align-items: center; */
	}

	.img-up {
		width: 220px;
		height: 220px;
		/* border: 1px solid #99A9BF; */
	}



	.del-img {
		display: flex;
		justify-content: flex-end;

	}

	.del-img img {
		height: 15px;
		width: 15px;
		border: 1px solid #FFFFFF;
		border-radius: 15px;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #888888;
	}

	.show-img img {
		height: 200px;
		width: 200px;
	}

	/* 上传样式 */

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 220px;
		height: 220px;
		line-height: 220px;
		text-align: center;
	}

	.avatar {
		width: 200px;
		height: 200px;
		display: block;
	}

	.butt {
		text-align: center;
		margin-top: 10px;
	}

	.text-t {
		font-size: 16px;
		color: #888888;
	}
</style>
